<template>
  <div class="profile_page">
    <head-top go-back="true" :head-title="profiletitle"></head-top>
    <div>
      <div class="scroll-wrap">
        <ul class="scroll-content" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()">
          <li v-for="item in prizeList" v-bind:key="item.id">
            <span>{{item.message}}</span> <span>/</span><span>{{item.createTime}}</span>
          </li>
        </ul>
      </div>
    </div>
    <foot-guide></foot-guide>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import headTop from "src/components/header/head";
import footGuide from "src/components/footer/footGuide";
import { mapState, mapMutations } from "vuex";
import { imgBaseUrl } from "src/config/env";
import { getImgPath } from "src/components/common/mixin";

export default {
  //
  name: "complexTable",

  data() {
    return {
      profiletitle: "首页",
      username: "登录/注册", //用户名
      resetname: "",
      mobile: "暂无绑定手机号", //电话号码
      balance: 0, //我的余额
      count: 0, //优惠券个数
      pointNumber: 0, //积分数
      avatar: "", //头像地址
      imgBaseUrl,
      //滚动
      prizeList: [],
      activeIndex: 0,
      intnum: undefined
    };
  },
  //
  computed: {
    top() {
      return -this.activeIndex * 20 + "px";
    }
  },

  created() {
    //
    this.ScrollUp();

     var vm = this;
    this.axios({
      method: "GET",
      url: "http://172.16.9.15:8082/property/msg/selectMsg"
    }).then(function(res) {
      vm.prizeList = res.data.data.msgs;
      console.log(vm.prizeList);
  
    });
  },
  mixins: [getImgPath],
  components: {
    headTop,
    footGuide
  },

  methods: {
    //
    ScrollUp() {
      // eslint-disable-next-line no-unused-vars
      this.intnum = setInterval(_ => {
        if (this.activeIndex < this.prizeList.length) {
          this.activeIndex += 1;
        } else {
          this.activeIndex = 0;
        }
      }, 1000);
    },

    Stop() {
      clearInterval(this.intnum);
    },
    Up() {
      this.ScrollUp();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
//
.scroll-wrap {
  margin-top: 100px;
  height: 150px;
  overflow: hidden;
}

.scroll-content {
  position: relative;
  transition: top 0.5s;
}

.scroll-content p {
  line-height: 50px;
  text-align: center;
}
//
.profile_page {
  p,
  span {
    font-family: Helvetica Neue, Tahoma, Arial;
  }
}
.profile-number {
  padding-top: 1.95rem;
  .profile-link {
    display: block;
    display: flex;
    box-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: $blue;
    padding: 0.666667rem 0.6rem;
    .privateImage {
      display: inline-block;
      @include wh(2.5rem, 2.5rem);
      border-radius: 50%;
      vertical-align: middle;
      .privateImage-svg {
        background: $fc;
        border-radius: 50%;
        @include wh(2.5rem, 2.5rem);
      }
    }
    .user-info {
      margin-left: 0.48rem;
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      p {
        font-weight: 700;
        @include sc(0.8rem, $fc);
        .user-icon {
          @include wh(0.5rem, 0.75rem);
          display: inline-block;
          vertical-align: middle;
          line-height: 0.75rem;
          .icon-mobile {
            @include wh(100%, 100%);
          }
        }
        .icon-mobile-number {
          display: inline-block;
          @include sc(0.57333rem, $fc);
        }
      }
    }
    .arrow {
      @include wh(0.46667rem, 0.98rem);
      display: inline-block;
      svg {
        @include wh(100%, 100%);
      }
    }
  }
}
.info-data {
  width: 100%;
  background: $fc;
  box-sizing: border-box;
  ul {
    .info-data-link {
      float: left;
      width: 33.33%;
      display: inline-block;
      border-right: 1px solid #f1f1f1;
      span {
        display: block;
        width: 100%;
        text-align: center;
      }
      .info-data-top {
        @include sc(0.55rem, #333);
        padding: 0.853333rem 0 0.453333rem;
        b {
          display: inline-block;
          @include sc(1.2rem, #f90);
          font-weight: 700;
          line-height: 1rem;
          font-family: Helvetica Neue, Tahoma;
        }
      }
      .info-data-bottom {
        @include sc(0.57333rem, #666);
        font-weight: 400;
        padding-bottom: 0.453333rem;
      }
    }
    .info-data-link:nth-of-type(2) {
      .info-data-top {
        b {
          color: #ff5f3e;
        }
      }
    }
    .info-data-link:nth-of-type(3) {
      border: 0;
      .info-data-top {
        b {
          color: #6ac20b;
        }
      }
    }
  }
}
.profile-1reTe {
  margin-top: 0.4rem;
  background: $fc;
  .myorder {
    padding-left: 1.6rem;
    display: flex;
    align-items: center;
    aside {
      @include wh(0.7rem, 0.7rem);
      margin-left: -0.866667rem;
      margin-right: 0.266667rem;
      display: flex;
      align-items: center;
      svg {
        @include wh(100%, 100%);
      }
    }
    .myorder-div {
      width: 100%;
      border-bottom: 1px solid #f1f1f1;
      padding: 0.433333rem 0.266667rem 0.433333rem 0;
      @include sc(0.7rem, #333);
      display: flex;
      justify-content: space-between;
      span {
        display: block;
      }
      .myorder-divsvg {
        @include wh(0.46667rem, 0.466667rem);
        svg {
          @include wh(100%, 100%);
        }
      }
    }
  }
  .myorder:nth-of-type(3) .myorder-div {
    border: 0;
  }
}
.router-slid-enter-active,
.router-slid-leave-active {
  transition: all 0.4s;
}
.router-slid-enter,
.router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
</style>
